<template>
	<view class="contain-main-box">
		<navigationTop navigationTitle="配电柜" :isHome="true" :isBack="true"></navigationTop>
	<view class="main-bg">
		<view class="wrap-set wrap">
			<view class="power-set clearFix">
				<image :src="$store.state.baseImg + '/icon/powerSet.png'"></image>
				<view class="power-title">xx市机房1楼通信机房</view>
			</view>
			<!-- list power start -->
			<view class="list-power clearFix">
				<view class="left-set clearFix" >
					<view @click="tabClick(1)" :class="hoverIndex==1 ? 'set-nav hover':'set-nav'">动力</view>
					<view @click="tabClick(2)" :class="hoverIndex==2 ? 'set-nav hover':'set-nav'">环境</view>
					<view @click="tabClick(3)" :class="hoverIndex==3 ? 'set-nav hover':'set-nav'">消防</view>
					<view @click="tabClick(4)" :class="hoverIndex==4 ? 'set-nav hover':'set-nav'">安防</view>
				</view>
				<view class="right-set clearFix" @click="tabViewClick()">
					<image :src="$store.state.baseImg + '/icon/tab.png'"></image>
				</view>
			</view>
			<!-- list power end -->
			<!-- 长方块start -->
			<view class="long-rect box-shadow">
				<!-- start rect -->
				<view :class="tabView ? 'items-rect clearFix':'items-part clearFix'" v-for="(item,indx) in 10" :key="indx">
					<view v-if="indx%3==1" class="left yellow-level2">
						<image :src="$store.state.baseImg + '/icon/box.png'"></image>
					</view>
					<view v-else-if="indx%3==2" class="left blue-level1">
						<image :src="$store.state.baseImg + '/icon/box.png'"></image>
					</view>
					<view v-else-if="indx%3==0" class="left red-level4">
						<image :src="$store.state.baseImg + '/icon/box.png'"></image>
					</view>
						
					<view class="mid">
						<view class="up">五楼UPS间电表</view>
						<view v-if="indx<5" class="down text-level4">该设备正在告警，请尽快处理</view>
						<view v-else class="down text-gray">该设备正常运行</view>
						<view class="fx-pao-red" >99+</view>
					</view>
					
					<view class="right" v-show="tabView">
						<image :src="$store.state.baseImg + '/icon/jianTou.png'"></image>
					</view>
				</view>
				<!-- rect end -->
			</view>
			<!-- 长方块end -->
		</view>
	</view>
	</view>
</template>

<script>
	import navigationTop from "@/components/navigationTop/index.vue";
	export default {
		components:{navigationTop},
		data() {
			return {
				hoverIndex:1,
				tabView:false
			}
		},
		onNavigationBarButtonTap(val){
			this.$backToIndex(val)
		},
		methods: {
			tabClick(n){
				this.hoverIndex = n;
			},
			tabViewClick(){
				this.tabView = !this.tabView;
			}
		}
	}
</script>

<style scoped>
	.wrap-set{
		background: rgba(255,255,255,0.6);
		padding: 0 30rpx 50rpx;color: #212c67;
		min-height: calc(100vh - 176rpx - 50rpx);
	}
	.power-set{
		padding: 40rpx 0;
	}
	.power-set image{
		width: 86rpx;height: 77rpx;float: left;margin-right: 20rpx;
	}
	.power-title{
		float: left;height: 77rpx;line-height: 77rpx;width: calc(100% - 106rpx);
	}
	.left-set{
		float: left;width: 80%;
	}
	.left-set .set-nav{
		float: left;width: 25%;text-align: center;height: 45rpx;line-height: 45rpx;
		position: relative;
	}
	.right-set{
		float: left;width: 20%;
	}
	.right-set image{
		width: 45rpx;height: 45rpx;float: right;margin-right: 30rpx;
	}
	.hover:before{
		content: " ";background: #faa703;height: 6rpx;width: 50rpx;
		position: absolute;bottom: 0;left: 50%;margin-left: -25rpx;
	}
	.set-nav:after{
		position: absolute;top: 0;right: 25rpx;
		width: 22rpx;height: 22rpx;border-radius: 50%;
		background: #FF3355;content: " ";opacity: 0.8;
	}
	.long-rect{
		margin-top: 30rpx;padding: 30rpx 30rpx 10rpx;
		background: rgba(255,255,255,0.6);
		border-radius: 30rpx;
	}
	.long-rect .items-part:nth-of-type(odd){margin-right: 20rpx;}
	.items-rect{margin-bottom: 20rpx;}
	.items-part{width: calc(50% - 15rpx);display: inline-block;vertical-align: middle;margin-bottom: 20rpx;}
	.items-rect .left{float: left;padding-top: 16rpx;position: relative;}
	.items-rect .mid{float: left; width: calc(100% - 64rpx - 58rpx);height: 88rpx;padding:0 20rpx;position: relative;}
	
	.items-rect .right{float: left;padding-top: 20rpx;}
	.items-part .left{float: left;padding-top: 16rpx;position: relative;}
	.items-part .mid{float: left; width: calc(100% - 64rpx - 20rpx);height: 88rpx;padding-left:20rpx;position: relative;}
	.left image{
		width: 64rpx;height: 55rpx;
	}
	.right image{
		width: 16rpx;height: 28rpx;
	}
	.items-part .fx-pao{
		top: -10rpx;right: -15rpx;
	}
	.mid .up{height: 32rpx;font-size: 28rpx;margin-bottom: 10rpx;}
	.mid .down{height: 32rpx;font-size: 26rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
</style>
